<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>朋友圈</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style type="text/css">
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .mui-preview-image.mui-fullscreen {
            position: fixed;
            z-index: 20;
            background-color: #000;
        }
        .mui-preview-header,
        .mui-preview-footer {
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 10;
        }
        .mui-preview-header {
            height: 44px;
            top: 0;
        }
        .mui-preview-footer {
            height: 50px;
            bottom: 0px;
        }
        .mui-preview-header .mui-preview-indicator {
            display: block;
            line-height: 25px;
            color: #fff;
            text-align: center;
            margin: 15px auto 4;
            width: 70px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 12px;
            font-size: 16px;
        }
        .mui-preview-image {
            display: none;
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .mui-preview-image.mui-preview-in {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }
        .mui-preview-image.mui-preview-out {
            background: none;
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
        }
        .mui-preview-image.mui-preview-out .mui-preview-header,
        .mui-preview-image.mui-preview-out .mui-preview-footer {
            display: none;
        }
        .mui-zoom-scroller {
            position: absolute;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            -webkit-backface-visibility: hidden;
        }
        .mui-zoom {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .mui-slider .mui-slider-group .mui-slider-item img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
        .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
            width: 100%;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
            display: inline-table;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
            display: table-cell;
            vertical-align: middle;
        }
        .mui-preview-loading {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }
        .mui-preview-loading.mui-active {
            display: block;
        }
        .mui-preview-loading .mui-spinner-white {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            height: 50px;
            width: 50px;
        }
        .mui-preview-image img.mui-transitioning {
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
            transition: transform 0.5s ease, opacity 0.5s ease;
        }
        @-webkit-keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @-webkit-keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        p img {
            max-width: 100%;
            height: auto;
        }

    </style>
    <script src="__TMPL__/public/assets/wuye/js/mui.min.js"></script>
    <link href="__TMPL__/public/assets/wuye/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/wuye/css/app.css" />
    <script src="__TMPL__/public/assets/wuye/js/iconfont.js"></script>
    <link href="__TMPL__/public/assets/wuye/css/mui.picker.css" rel="stylesheet" />
    <link href="__TMPL__/public/assets/wuye/css/mui.poppicker.css" rel="stylesheet" />
    <script src="__TMPL__/public/assets/wuye/js/mui.min.js"></script>
    <script src="__TMPL__/public/assets/wuye/js/iconfont.js"></script>
    <script src="__TMPL__/public/assets/wuye/js/mui.picker.js"></script>
    <script src="__TMPL__/public/assets/wuye/js/mui.poppicker.js"></script>
    <script src="__TMPL__/public/assets/wuye/js/mui.zoom.js"></script>
    <script src="__TMPL__/public/assets/wuye/js/mui.previewimage.js"></script>
    <script src="__TMPL__/public/assets//js/jquery-1.10.2.min.js"></script>
</head>

<body>

<header class="mui-bar mui-bar-nav" id="header">
    <a class="mui-icon mui-icon-left-nav mui-pull-left" href="javascript:window.history.go(-1);"></a>
    <h1 class="mui-title">朋友圈</h1>
    <a class="mui-icon  mui-pull-right" style="font-size: 16px;padding-top: 0px;color:orange;" href="#picture">
        <i class="mui-icon mui-icon-compose"></i>发布
    </a>
</header>
{:widget('Wuye/nav')}
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="index.html">
        <span class="mui-icon mui-icon-home" id="home1"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="service.html">
        <span class="mui-icon mui-icon-pengyouquan"></span>
        <span class="mui-tab-label">服务</span>
    </a>
    <a class="mui-tab-item" href="marketlist.html">
        <span class="mui-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tiaozaoshichang01"></use></svg></span>
        <span class="mui-tab-label">快捷订菜</span>
    </a>
    <a class="mui-tab-item" href="me.html">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>
<div class="mui-content">
    <div id="friend" class="mui-control-content  mui-active">
        <notempty name="data">
            <volist name="data" id="data">
            <div class="mui-card">
                <div class="mui-card-header mui-card-media">
                    <img src="{$data.headimgurl}" />
                    <div class="mui-media-body">
                        <notempty name="$data['remark']">
                            {$data.remark|default=''}
                            <else/>
                            {$data.nickname|default=''}
                        </notempty>
                        <p>发表于 <?php echo date('Y-m-d H:i:s',$data['time'])?></p>
                    </div>
                </div>
                <div class="mui-card-content" >
                    <div class="mui-card-content-inner">
                        <p style="color: #333;">{$data.content}</p>
                    </div>
                    <ul class="mui-table-view mui-grid-view">
                        <?php $img = explode(',',$data['imgsrc']);$cout = count($img);?>
                        <volist name="img" id="img">
                            <li class="mui-table-view-cell mui-media
                            <switch name="cout" >
                                <case value="1">mui-col-xs-12</case>
                                <case value="2">mui-col-xs-6</case>
                                <case value="3">mui-col-xs-4</case>
                                <case value="4">mui-col-xs-6</case>
                                <default />mui-col-xs-4
                            </switch>
                            ">
                                <a href="#">
                                    <img class="mui-media-object" src="<?php echo cmf_get_image_url($img);?>" data-preview-src="" data-preview-group="{$data.id}">
                                </a>
                            </li>
                        </volist>
                    </ul>

                </div>
                <div class="mui-card-footer">
                    <a class="mui-card-link" href="javascript:;" id="zan{$data.id}"><span class="mui-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-good"></use></svg></span>赞({$data.zan|default='0'})</a>
                    <a class="mui-card-link"></a>
                    <a href="javascript:;" class="mui-card-link" id="huifu{$data.id}"><i class="mui-icon mui-icon-chatboxes"></i>回复</a>
                </div>

                <div class="mui-input-row" id="reply{$data.id}" style="display: none;">
                    <input type="text" placeholder="请输入内容" style="width:80%;" id="content{$data.id}">
                    <button class="mui-btn mui-btn-primary" id="queren{$data.id}">确认</button>
                </div>

                <ul class="mui-table-view" id="ul{$data.id}">
                    {:widget('Wuye/huifu', ['friend_id'=>$data.id])}
                </ul>
                <script>
                    mui("#huifu{$data.id}")[0].addEventListener("tap",function(){
                        $("#reply{$data.id}").toggle();
                    });
                    mui("#zan{$data.id}")[0].addEventListener("tap",function(){
                        var zan{$data.id} = document.getElementById("zan{$data.id}");
                        var id = {$data.id};
                        console.log(id);
                        mui.ajax("{:url('portal/wuye/zan')}",{
                            data:{'id':id},
                            dataType:'json',//服务器返回json格式数据
                            type:'post',//HTTP请求类型
                            timeout:10000,//超时时间设置为10秒；
                            headers:{'Content-Type':'application/json'},
                            success:function(data){
                                if(data.code == 0){
                                    mui.toast(data.msg);
                                }else{
                                    mui.toast(data.msg);
                                    zan{$data.id}.innerHTML = '<span class="mui-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-good"></use></svg></span>赞('+data.data.zan+')';
                                }
                            },
                            error:function(xhr,type,errorThrown){
                                //异常处理；
                                console.log(type);
                            }
                        });
                    });
                    mui("#queren{$data.id}")[0].addEventListener("tap",function(){
                        var id = {$data.id};
                        var js_openid = "{$data.openid}";
                        var content = document.getElementById("content{$data.id}").value;
                        var ul = document.getElementById("ul{$data.id}");
                        mui.ajax("{:url('portal/wuye/huifu')}",{
                            data:{id:id,content:content,js_openid:js_openid},
                            dataType:'json',//服务器返回json格式数据
                            type:'post',//HTTP请求类型
                            timeout:10000,//超时时间设置为10秒；
                            headers:{'Content-Type':'application/json'},
                            success:function(data){
                                if(data.code == 1){
                                    mui.toast(data.msg);
                                    ul.innerHTML += '<li class="mui-table-view-cell mui-media" >\n' +
                                        '                        <a href="javascript:;">\n' +
                                        '                            <img class="mui-media-object mui-pull-left" src="'+data.data.headimgurl+'">\n' +
                                        '                            <div class="mui-media-body">\n' +
                                        '                                <p class=\'mui-ellipsis\'>'+content+'</p>\n' +
                                        '                            </div>\n' +
                                        '                        </a>\n' +
                                        '                    </li>';
                                    location.reload();
                                }
                                if(data.code == 0){
                                    mui.toast(data.msg);
                                    $("#reply{$data.id}").hide();
                                }
                            },
                            error:function(xhr,type,errorThrown){
                                //异常处理；
                                console.log(type);
                            }
                        });
                    });
                </script>
            </div>
        </volist>
        </notempty>
    </div>
</div>

<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#" style="color: #0b0b0b">朋友圈</a>
        </li>
        <li class="mui-table-view-cell">
            <a href="#" style="color: #0b0b0b">跳蚤市场</a>
        </li>
    </ul>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#picture"><b>取消</b></a>
        </li>
    </ul>
</div>
</body>

<script>
    mui.previewImage();
</script>
<script>
    var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;

    window.onresize=function(){

        //软键盘弹起与隐藏  都会引起窗口的高度发生变化
        var  resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;

        if(resizeHeight*1<originalHeight*1){ //resizeHeight<originalHeight证明窗口被挤压了

            plus.webview.currentWebview().setStyle({
                height:originalHeight
            });

        }
    }
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    var gallery = mui('.mui-slider');
    gallery.slider({
        interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
    });
    var info = document.getElementById("info");
    mui('body').on('tap', '.mui-popover-action li>a', function() {
        var a = this,
            parent;
        //根据点击按钮，反推当前是哪个actionsheet
        for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
            if (parent.classList.contains('mui-popover-action')) {
                break;
            }
        }
        //关闭actionsheet
        mui('#' + parent.id).popover('toggle');
        if(a.innerHTML == '朋友圈'){
            console.log(a.innerHTML);
            window.location.href = "{:url('wuye/friends')}";
        }else if(a.innerHTML == '跳蚤市场'){
            window.location.href = "{:url('wuye/market')}";
        }

    });
    mui('body').on('tap','a',function(){document.location.href=this.href;});
</script>
<!--jq相关代码-->

</html>